<template>
	<div class="analystVote">
		<headercontent v-bind:headerTitle = "headerTitle"></headercontent>
		<div class="swiper-container">
		    <div class="swiper-wrapper">
		      <div class="swiper-slide"><img class="banner" src="../assets/img/slider1.jpg" alt="" /></div>
		      <div class="swiper-slide"><img class="banner" src="../assets/img/slider2.jpg" alt="" /></div>
		      <div class="swiper-slide"><img class="banner" src="../assets/img/slider3.jpg" alt="" /></div>
		      <div class="swiper-slide"><img class="banner" src="../assets/img/slider4.jpg" alt="" /></div>
		    </div>
		    <div class="swiper-pagination"></div>
		</div>
		<div class="section voteSection">
			<div class="sectionVote">
				<table class="voteListTime">
					<tbody>
						<tr>
							<td>
								<p class="color_666">报名/投票时间</p>
								<i class="ico"></i>
								<p class="color_999">{{ analystVoteInfo.voteTime }}</p>	
							</td>
							<td>
								<p class="color_666">频奖时间</p>
								<i class="ico"></i>
								<p class="color_999">{{ analystVoteInfo.prizeTime }}</p>
							</td>
							<td>
								<p class="color_666">频奖地点</p>
								<i class="ico"></i>
								<p class="color_999">{{ analystVoteInfo.prizePlace }}</p>	
							</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="sectionContent">
				<table class="voteResult">
					<tbody>
						<tr>
							<td>
								<p class="number">{{ analystVoteInfo.signupNumber }}</p>
								<p class="color_999">报名人数</p>	
							</td>
							<td style="border:1px solid #ddd;border-top:none;border-bottom: none;;">
								<p class="number">{{ analystVoteInfo.voteNumber }}</p>
								<p class="color_999">总投票总数</p>	
							</td>
							<td>
								<p class="number">{{ analystVoteInfo.visitNumber }}</p>
								<p class="color_999">总访问数</p>	
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
		<div class="section">
			<div class="defaultShow">
				<form class="searchCompany clearfloat" action="#" method="get">
					<div class="searchInput l">
						<input class="text" type="text" v-model="analystNameSearch" name="companyName" placeholder="请输入编号与名字"/>
						<img src="../assets/img/it@2x.png" alt="" class="ico" />
					</div>
					<button class="r" type="button"  v-on:click="onsubmitBtn">搜 索</button>
				</form>
				<div class="analysisDisplay">
					<ul class="clearfloat">
						<li v-for="item in analystVoteArray">
							<div class="displayDiv">
								<router-link :to="{ name: 'AnalystInfo', params: { id: item.id }}">
									<img class="pic" v-lazy="item.img" alt="" />
									<p class="name">{{ item.name }}</p>
								</router-link>
								<a class="btn redBtn" href="#"><img class="btnIco" src="../assets/img/ghfoi@2x.png" alt="" />给TA投票</a>
								<a class="btn yellBtn" href="#">{{ item.votes }}票</a>
								<span class="numberList">{{ item.id }}</span>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<footercontent></footercontent>
	</div>
</template>

<script>
	import headercontent from './header'
	import footercontent from './footer'
	import axios from 'axios'
	export default {
  		name: 'AnalystVote',
  		components:{headercontent,footercontent},
  		data(){
			return {
				headerTitle: "分析师投票",
				analystVoteArray:[],
				page:0,
				size:6,
				analystVoteInfo:{},
				analystNameSearch:"",
				droploadFun:"",
				type:"",
				domain:""
			}
		},
  		mounted() {
			this.init();
		},
		watch:{
		    '$route'(to, from){
		     var _this = this;
		     _this.analystNameSearch = "";
		     _this.refreshPage();
		    }
		},
		methods: {
			init(){
				var _this = this;
				_this.type = _this.$route.params.type;
				_this.domain = _this.$store.state.domain;
				axios.get(_this.domain+'analyst_type_info/'+ _this.type).then(function(res) {
					_this.analystVoteInfo = res.data.data;
				}).catch(function(error) {
					console.log(error);
				});
			
			    $('.analystVote .analysisDisplay').dropload({
			        scrollArea : window,
			        domDown:{
			        	domClass : 'dropload-down',
						domRefresh : '',
						domLoad : '<div class="dropload-load"><span>正在为亲加载</span></div>',
						domNoData : '<div class="dropload-noData">暂无数据</div>'
			        },
			        distance:50,
			        loadDownFn : function(me){
			           _this.droploadFun = me;
			           _this.page++;
			           _this.getData(_this.page,_this.size,me,_this.domain,_this.type);
			        }
			    });
				var swiper = new Swiper('.swiper-container', {
					loop: true,
				   	autoplay: {
			        delay: 3500
			      },
			      pagination: {
			        el: '.swiper-pagination',
			        clickable: true,
			        renderBullet: function (index, className) {
			          return '<span class="' + className + '"></span>';
			        },
			      },
			   });
			},
			getData(page,size,me,domain,type){
				var _this = this;
				axios.get(domain+'analyst_list/'+ type +'/'+page, {
				  params: {page:page}
				}).then(function(res) {
					console.log(res.data);
					if(res.data.data.length){
						_this.analystVoteArray = _this.analystVoteArray.concat(res.data.data);
					}else{
						me.lock();
                        me.noData();
                        console.log("no data");
					}
					_this.$nextTick(()=>{
						if(me){
							me.resetload();
						}
				   });
				   
					_this.$nextTick(()=>{
						if(me){
							me.resetload();
						}
				   });
				}).catch(function(error) {
					console.log(error);
					if(me){
						me.resetload();
					}
				});
			},
			onsubmitBtn(){
				var _this = this;
				var pat=new RegExp("[^a-zA-Z0-9\_\u4e00-\u9fa5]","i"); 
			    if(pat.test(_this.analystNameSearch) || _this.analystNameSearch == ""){
			    	$(".dialogContent .usualMessage").empty().append('<span style="color:red">请输入正确的公司名或人名.</span>');
			    	_this.openDialog();
			    	return false; 
			    }else{
			    	_this.refreshPage();
	        	}
			},
			openDialog(){
				$(".usualMessage").show();
				$(".dialogTitle").empty().append("系统消息");
				$(".dialogMask").fadeIn();
    			$(".divDialog").fadeIn();
			},
			closeDialog(){
				$(".dialogMask").fadeOut();
    			$(".divDialog").fadeOut();
			},
			refreshPage(){
				var _this = this;
				$("html,body").animate({scrollTop: $('.analystVote').offset().top},function(){
			     	$(".dialogContent .usualMessage").empty().append('<div class="dropload-load"><span>正在为亲加载</span></div>');
			     	 _this.openDialog();
			    	_this.page = 1;
			    	setTimeout(function(){
			    	  _this.droploadFun.unlock();
			    	  _this.droploadFun.noData(false);
			    	  _this.getData(_this.page,_this.size,_this.droploadFun,_this.domain,_this.type);
			    	  _this.closeDialog();
			    	},1000);
			    });
				
			}
		}
	}
</script>
<style>
	.analysisDisplay {padding:0px 10px;}
	.analysisDisplay li {float: left; width: 32%;margin:0px 2% 2% 0;}
	.analysisDisplay li:nth-child(3n+3) {margin-right:0px;}
	.analysisDisplay .pic {width: 59%; border-radius: 50%;min-height: 50px;}
	.displayDiv {background:#fff;border:1px solid #ddd;text-align:center;padding: 10px 0; position: relative;}
	.displayDiv .name { font-size: 1.2em;color:#333;}
	.numberList { position: absolute; top: 5px; left: 5px; color: #f30401; font-size: 1.2em; border: 1px solid; border-radius: 50%; width: 20px; height: 20px; line-height: 20px;}
	.displayDiv .btn{color: #fff; width: 80%; display: block; margin: 5px auto 0px; height: 22px; line-height: 22px; position: relative; font-size: 1.2em; border-radius: 16px;box-sizing: border-box;}
	.displayDiv .redBtn{padding-left: 10px;background: #f50500;}
	.displayDiv .yellBtn{background: #ff8a00;}
	.displayDiv .btnIco {position: absolute; width: 15px; left: 4px; top: 3px;}
	.dropload-load span {background:url(../assets/img/loading.gif) no-repeat center right;padding-right:20px;background-size:contain;font-size:1.2em;}
</style>